import React from "react";
import { Form, Input, Checkbox, Button, message } from "antd";
import { addUserApi } from "../../service/auth";
import "./Register.css";

const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

function Register(props) {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log("Received values of form: ", values);
    addUserApi({
      email: values.email,
      phone: values.phone,
      userName: values.userName,
      userPwd: values.userPwd,
    })
      .then((res) => {
        console.log(res);
        if (res.status === 200) {
          console.log("注册成功");
          props.history.push("/login");
          message.info("注册成功！请登录！");
        } else {
          message.info(res.msg);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      onFinish={onFinish}
      initialValues={{
        prefix: "86",
      }}
      scrollToFirstError
    >
      <Form.Item
        name="userName"
        label="用户名"
        tooltip="您所使用的用户名，用于角色区分和数据统计，若无用户名可能无法下载数据！"
        rules={[
          {
            required: true,
            message: "请输入您的用户名!",
            whitespace: true,
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="userPwd"
        label="密码"
        rules={[
          {
            required: true,
            message: "密码不得为空!",
          },
          {
            pattern: new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$"),
            message: "密码为包含英文和数字的6-12位字符！",
          },
        ]}
        hasFeedback
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="confirmPwd"
        label="确认密码"
        dependencies={["userPwd"]}
        hasFeedback
        rules={[
          {
            required: true,
            message: "请再次确认密码!",
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue("userPwd") === value) {
                return Promise.resolve();
              }

              return Promise.reject(new Error("两次输入的密码不一致!"));
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="email"
        label="E-mail"
        rules={[
          {
            type: "email",
            message: "请输入正确的邮箱地址!",
          },
          {
            required: true,
            message: "邮箱不得为空!",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="phone"
        label="电话号码"
        rules={[
          {
            required: true,
            message: "请输入您的电话号码!",
          },
          {
            len: 11,
            message: "请输入正确的电话号码",
          },
        ]}
      >
        <Input
          style={{
            width: "100%",
          }}
        />
      </Form.Item>

      <Form.Item
        name="agreement"
        valuePropName="checked"
        rules={[
          {
            validator: (_, value) =>
              value
                ? Promise.resolve()
                : Promise.reject(new Error("请阅读协议并同意")),
          },
        ]}
        {...tailFormItemLayout}
      >
        <Checkbox>
          我已经阅读并同意 <a href="https://baidu.com">用户协议</a>
        </Checkbox>
      </Form.Item>
      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
      </Form.Item>
    </Form>
  );
}

export default Register;
